import {View, Text, Image} from "@tarojs/components";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {Button, Cell, CellGroup, Empty, Tab, Tabs} from "@antmjs/vantui";
import LogUtils from "@/utils/log";
import {CouponsModel} from "@/common/apis/model";
import {couponsListPageApi, couponsReceiveApi} from "@/common/apis/home_datasource";
import AssetImage from "@/common/AssetImage";
import Utils from "@/utils/common";
import ShowUtils from "@/utils/show_utils";
import NumberUtils from "@/utils/number_utils";

definePageConfig({
  navigationBarTitleText: '优惠券'
})
export default function CouponList() {
  const tabs = useRef([
    {
      title: '可使用',
      key: 0
    }, {
      title: '可领取',
      key: 1
    },
    {
      title: '已使用',
      key: 2
    },
    {
      title: '已失效',
      key: 3
    },
  ]);
  return (
    <View>
      <Tabs
        active={0}
        sticky
        swipeThreshold={6}
        color='#56abe4'
      >
        {
          tabs.current.map((item, index) => (
            <Tab key={`tabs#demo1${index}`} title={item.title}>
              <View>
                <CouponInnerList type={item.key}/>
              </View>
            </Tab>
          ))
        }
      </Tabs>
    </View>
  )
}


function CouponInnerList(props) {
  const type = props.type

  const [items, setItems] = useState<CouponsModel[]>([])

  const getList = useCallback(() => {
    couponsListPageApi(type).then((res) => {
      if (res) {
        setItems(res)
      }
    })
  }, [type]);

  useEffect(() => {
    getList();
    return () => {
      LogUtils.info("ProjectList", "useEffect")
    }
  }, [getList, type]);
  return (
    <View style={{backgroundColor: AssetImage.bg, paddingTop: '10px', height: '100VH'}}>
      {
        items && !Utils.isEmpty(items) ? <View>
          {
            items.map((item, index) => {
              return <CouponItem key={index} item={item} type={type} onRefresh={getList}/>
            })
          }
        </View> : <Empty description='暂无数据'/>
      }
    </View>
  )
}

function CouponItem(props) {
  const item = props.item
  const type = props.type

  const renderEndView = useCallback(() => {
    if (type === 1) {
      return <Button size='mini' type='info' hairline plain onClick={() => {
        if (!item.userId) {
          couponsReceiveApi(item.id).then((res) => {
            if (res) {
              Utils.showToast('领取成功')
              if (props.onRefresh) {
                props.onRefresh()
              }
            }
          })
        }
      }}>{item.userId ? '已领取' : '立即领取'}</Button>
    } else {
      let stringIcon = ''
      if (type === 0) {
        stringIcon = AssetImage.keshiyong
      } else if (type === 2) {
        stringIcon = AssetImage.yishiyong
      } else if (type === 3) {
        stringIcon = AssetImage.yishixiao
      }
      return <Image src={stringIcon} style={{width: '50px', height: '50px'}}/>;
    }

  }, []);


  return (
    <CellGroup inset style={{marginTop: '10px'}}>
      <Cell
        renderIcon={<View style={{display: 'flex', flexDirection: 'column', alignItems: 'center',width:'60px'}}>
          <Text style={{
            color: type == 0 || type == 1 ? 'red' : 'gray',
            fontSize: '16px'
          }}
          >{NumberUtils.stringToNumber(`${item.discount}`)}元</Text>
          <Text style={{
            color: 'gray',
            fontSize: '12px'
          }}>{item.type === 1 ? `满${NumberUtils.stringToNumber(`${item.minAmount}`)}可用` : '无门槛'}</Text>
        </View>} renderTitle={<View
        style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '40px'}}>
        <Text style={{color: type == 0 ? 'black' : 'gray'}}>{item.title}</Text>
        <Text style={{color: 'gray', fontSize: '12px'}}>过期时间：{ShowUtils.getDateByString(item.deadlineTime)}</Text>
      </View>}
        renderRightIcon={renderEndView()}
      ></Cell>
    </CellGroup>
  )
}


